// 短句拼写
<template>
  <div class="spell">
    <Head />
    <div class="search">
      <p>人教版小学英语必修教材-拼写</p>
      <p class="wen">
        <input type="text" placeholder="英汉互译词典输入框" />
        <img src="../assets/sousuo.png" class="pos" />
      </p>
      <img src="../assets/guanbi(1).png" @click="back()" />
    </div>
    <div class="con">
      <div class="page-bar left">
        <ul>
          <li v-if="list_in != stop">
            <a @click="before()" style="padding-left: 30%"
              ><img src="../assets/xiangshang.png" style="width: 80%"
            /></a>
          </li>
          <li v-else>
            <a class="banclick"><img src="../assets/xiangshang.png" /></a>
          </li>
          <li
            v-for="(item, index) in show_list"
            v-bind:class="{ active: list_in == index }"
            :key="index"
          >
            <a @click="select(index)" style="diplay: block">
              <p>{{ item.title }}</p>
              <p class="size">
                <span>{{ item.entry }}</span
                >- <span>{{ item.yet }}</span> |
                <span>{{ item.error }}</span>
              </p></a
            >
          </li>
          <li v-if="start != list_in">
            <a @click="next()" style="padding-left: 30%"
              ><img src="../assets/xiangxia.png" style="width: 80%"
            /></a>
          </li>
          <!-- @click="xia()" id="xia" -->
          <li v-else>
            <a class="banclick"><img src="../assets/xiangxia.png" /></a>
          </li>
        </ul>
      </div>
      <div class="right">
        <div v-show="cur == 0">
          <div class="content">
            <div class="tit">{{ con.desc }}</div>
            <div class="down">
              <p class="color">{{ con.title }}</p>
              <div class="tab" id="tab">
                {{con.title}}
              </div>
              <button @click="nextt()">下一条</button>
              <div class="li">
                <p>{{ con.example }}</p>
                <p>{{ con.translate }}</p>
                <p>{{ con.else }}</p>
              </div>
            </div>
          </div>
        </div>
        <div v-show="cur == 1">22222</div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
// import axios from "axios";
import {
    spell5

  } from '@/api'
import Head from "@/components/Head.vue";
import Footer from "@/components/Footer.vue";
export default {
  name: "Word",
  components: {
    Head,
    Footer,
  },
  data() {
    return {
      all: 5, //总页数
      cur: 0, //当前页码
      totalPage: 1, //当前条数
      list: [
        { title: "第一章节", entry: "条目47", yet: "已学0", error: "错误2" },
        { title: "第二章节", entry: "条目47", yet: "已学0", error: "错误2" },
        { title: "第三章节", entry: "条目47", yet: "已学0", error: "错误2" },
        { title: "第四章节", entry: "条目47", yet: "已学0", error: "错误2" },
        { title: "第五章节", entry: "条目47", yet: "已学0", error: "错误2" },
        { title: "第六章节", entry: "条目47", yet: "已学0", error: "错误2" },
        { title: "第七章节", entry: "条目47", yet: "已学0", error: "错误2" },
        { title: "第八章节", entry: "条目47", yet: "已学0", error: "错误2" },
        { title: "第九章节", entry: "条目47", yet: "已学0", error: "错误2" },
        { title: "第十章节", entry: "条目47", yet: "已学0", error: "错误2" },
        { title: "第十一章节", entry: "条目47", yet: "已学0", error: "错误2" },
        { title: "第十二章节", entry: "条目47", yet: "已学0", error: "错误2" },
      ],
      show_list:[],
      list_in:0,
      start:12,
      stop:0,
      indexs:0,
      con: {
        // title: "【中】独角兽",
        // word: "unicorn",
      },
      // li: [
      //   { text: "[例句]He’s modelling a unicorn in wax.." },
      //   { text: "他用蜡制作独角兽。" },
      //   { text: "[其他] 复数：unicorns" },
      // ],
    };
  },
  created(){
    this.dataListFn();
    let that = this;
     spell5().then((res) =>{
      console.log(res)
      that.con = res.data.data.neirong[0];
     this.zonglis = res.data.data;
    })

    // axios.get("/api/SendSpell/index").then((res) => {
    //   that.con = res.data.data.neirong[0];
    //   // console.log(that.con, "111");
    //   this.zonglis = res.data.data;
    // })
  },
  methods: {
    //请求数据
    dataListFn(index) {
      // this.$axios
      //   .get("http://127.0.0.1:8090/demand/selectListByPage", {
      //     params: {
      //       page: index,
      //       limit: "10",
      //       state: 0,
      //     },
      //   })
      //   .then((res) => {
      //     if (res.data.message == "success") {
      //       this.dataList = [];
      //       for (let i = 0; i < res.data.data.length; i++) {
      //         this.dataList.push(res.data.data[i]);
      //       }
      //       this.all = res.data.totalPage; //总页数
      //       this.cur = res.data.pageNum;
      //       this.totalPage = res.data.totalPage;
      //       console.log(this.all, "this.all ");
      //       console.log(this.cur, "this.cur ");
      //       console.log(this.totalPage, "this.totalPage ");
      //     }
      //   });
      this.dellist();
      console.log(this.show_list)
    },
    //分页
    select(index){
    this.list_in = index;
  },
  dellist(index,stop){
     let arr = this.list;
      this.show_list = arr.slice(index||0,stop||6);
      console.log(this.show_list)
  },
  next(){
    this.list_in += 1;
     if(this.list_in == 6){
      this.dellist(6,12)
      this.list_in = 0;
      this.start = 5;
      this.stop=12;
    }
  },
  before(){
    this.list_in -= 1;
    if(this.start == 5&&this.list_in == -1){
      this.dellist(0,6)
      this.list_in = 5;
      this.start = 12;
      this.stop=0;
    }
  },

    nextt() {
      let that = this;
      console.log(this.zonglis, 222);
      let inde = this.indexs + 1;
      console.log(inde);
      this.con = this.zonglis.neirong[inde];
      this.indexs = inde;

    },
    back() {
      this.$router.push("index");
    },
  },
  watch:{
    list_in(){
      console.log(this.list_in)
    }
  },
  computed: {
    //分页
    // indexs: function () {
    //   var left = 1;
    //   var right = this.all;
    //   var ar = [];
    //   if (this.all >= 5) {
    //     if (this.cur > 3 && this.cur < this.all - 2) {
    //       left = this.cur - 2;
    //       right = this.cur + 2;
    //     } else {
    //       if (this.cur <= 3) {
    //         left = 1;
    //         right = 5;
    //       } else {
    //         right = this.all;
    //         left = this.all - 4;
    //       }
    //     }
    //   }
    //   while (left <= right) {
    //     ar.push(left);
    //     left++;
    //   }
    //   return ar;
    // },
  },
};
</script>

<style lang="scss" scoped>
/*分页*/
.page-bar {
  margin: 40px auto;
  margin-top: 150px;

  .size {
    margin-bottom: 1rem;
  }
}
ul,
li {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.page-bar li:first-child > a {
  margin-left: 0px;
}
.page-bar a {
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 2rem;
  color: #fff;
  cursor: pointer;
  // margin-right: 20px;
}
.page-bar a:hover {
  // background-color: #eee;
  color: #05d380;
}
.page-bar a.banclick {
  cursor: not-allowed;
  padding-left: 30%;
}

.page-bar a.banclick img {
  width: 80%;
}
.page-bar .active a {
  color: #fff;
  cursor: default;
  color: #05d380;
}
.page-bar i {
  font-style: normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}

.tab {
  font-size: 50px;
  width: 20%;
  margin: 0 auto;
  text-align: center;
  border: 2px solid #FC2520;
  padding: 0 0 0.4rem 0;
  margin-top: 1rem;
}

.spell {
  width: 100%;

  .search {
    width: 98%;
    padding: 0 1%;
    height: 40px;
    line-height: 40px;
    background-color: #3571ff;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding-bottom: 3px;

    .wen {
      width: 24%;
      position: relative;

      input {
        width: 100%;
        background: #ffffff;
        border-radius: 24px;
        border: 1px solid #fff;
        height: 28px;
        line-height: 28px;
        text-indent: 2.4em;
      }

      .pos {
        position: absolute;
        left: 6px;
        top: 13px;
        width: 4.5%;
      }
    }

    > img {
      width: 1%;
      height: 22px;
      margin-top: 8px;
    }
  }

  .con {
    width: 99%;
    margin-left: 1%;
    display: flex;
    justify-content: space-between;

    .left {
      width: 14%;
      background-color: #000;
      opacity: 0.7;
      color: #fff;
      margin-top: 0.6rem;

      .btn {
        img {
          width: 12%;
          // margin-left: 44%;
          margin: 1rem 44% 1rem;
        }
      }

      .list {
        margin: 2rem 0;
        margin-left: 20%;

        .size {
          font-size: 14px;
        }
      }
    }

    .right {
      width: 88%;
      // margin: 0 auto;
      background-color: #f5f5f5;
      padding-bottom: 6.4rem;

      .content {
        width: 94%;
        background-color: #fff;
        margin: 1rem 2% 0;

        .tit {
          width: 94%;
          margin: 0 auto;
          text-align: center;
          font-size: 26px;
          padding: 3rem 0;
          color: #333333;
          border-bottom: 1px solid #f5f5f5;
        }

        .down {
          width: 100%;
          margin-top: 1rem;

          .color {
            font-size: 50px;
            text-align: center;
            color: #ff2a25;
          }

          button {
            height: 50px;
            line-height: 50px;
            border: 1px solid #fff;
            outline: none;
            width: 14%;
            margin-left: 43%;
            color: #fff;
            margin-top: 6rem;
            background: linear-gradient(-11deg, #05d380, #46eaa8);
            box-shadow: 0px 4px 10px 0px rgba(18, 47, 95, 0.15);
            border-radius: 5px;
            font-size: 18px;
          }

          .li {
            margin-top: 2rem;
            margin-left: 6%;

            p {
              line-height: 2rem;
            }
          }
        }
      }
    }
  }
}
</style>
